﻿<!DOCTYPE html >
<html>
<head>
    <link href="images/5.icon" rel="icon" type="image/x-icon"/>
    <title>体检医院</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <link href="css/yiyuan.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <!-- <style type="text/css">
         .container .btn btn-primary{
             text-align: center;
         }
     </style>-->
</head>
<body>
<div class="head">
    <div class="w1300">
        <div class="top c">
            <div class="l">
                    <span><script> 
var d = new Date();
document.write(d.getHours() + "时:" + d.getMinutes() + "分");
</script></span></div>
            <div class="r">
                <a href="guanyuwomen.html" target="_blank">关于我们</a><a href="baozhuzhongxin.html"
                                                                      target="_blank">帮助中心</a></div>
        </div>
        <div class="center c">
            <div class="logo l">
                <img src="images/logo.jpg"/>
            </div>
            <div class="nav c">
                <ul>
                    <li><a href="/index" target="_self">首 页</a></li>
                    <li class="act"><a href="#" target="_self">体 验 医 院</a></li>
                    <li><a href="/taocan" target="_self">体 验 套 餐</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="sec2">
    <div class="w1200">
        <div class="search1 search_radius c">
            <div class="search-header-placeholder">
                <div class="search_title font-12">
                    <!--<div class="search_date">
                        <span class="w30 text-ct color-999">体检日期</span>
                        <input value="" placeholder="请选择体检日期" type="text">
                    </div>-->
                    <div class="search_hot">
                        <input value="" type="text" placeholder="(关键词选填) 医院名">
                    </div>
                    <a href="javascript:;" class="search2">查询</a>
                </div>
            </div>
        </div>
        <div class="search_main">
            <div class="search_list">
                <div class="search_name">
                    位置
                </div>
                <div class="search__option_box">
                    <div class="search__option">
                        <!--<div class="select_bottom select">
                            <a href="#">不限 </a>
                        </div>-->
                        <select id="province">
                            <option value="1">请选择省</option>&nbsp;&nbsp;&nbsp;&nbsp;
                        </select>
                        <select id="city" hidden>
                            <option value="2">请选择市</option>&nbsp;&nbsp;&nbsp;&nbsp;
                        </select>
                        <select id="area" hidden>
                            <option value="3">请选择区</option>
                        </select>
                    </div>
                </div>
                <div class="clear">
                </div>
            </div>
            <div class="search_list">
                <div class="search_name">
                    类型
                </div>
                <div class="search__option_box">
                    <div class="search__option">
                        <div class="select_bottom select">
                            <a href="#">不限</a></div>
                        <ul class="organization_filtrate">
                            <li><a href="#">医&nbsp;&nbsp;院</a></li>
                            <li><a href="#">专业机构</a></li>

                        </ul>
                    </div>
                </div>
                <div class="clear">
                </div>
            </div>
            <!--            <div class="search_list">-->
            <!--                <div class="search_name">-->
            <!--                    等级-->
            <!--                </div>-->
            <!--                <div class="search__option_box">-->
            <!--                    <div class="search__option">-->
            <!--                        <div class="select_bottom select">-->
            <!--                            <a href="#">不限</a></div>-->
            <!--                        <ul class="organization_filtrate">-->
            <!--                            <li><a href="#">三级甲等</a></li>-->
            <!--                            <li><a href="#">三级乙等</a></li>-->
            <!--                            <li><a href="#">三级丙等</a></li>-->
            <!--                            <li><a href="#">二级甲等</a></li>-->
            <!--                            <li><a href="#">二级乙等</a></li>-->
            <!--                            <li><a href="#">一级机构</a></li>-->
            <!--                            <li><a href="#">二级机构</a></li>-->
            <!--                            <li><a href="#">三级机构</a></li>-->

            <!--                        </ul>-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--                <div class="clear">-->
            <!--                </div>-->
            <!--            </div>-->
        </div>
        <div class="serch_info">
            共有<span class="color-FF4" id="unitNumber">n</span> 家符合条件的体检中心
            <!--<h1 style="float: right;">
                体检医院哪家好？</h1>-->
        </div>
        <div class="pics">
            <div id="recommend">
                <div class="container">
                    <h5>医院推荐</h5>
                    <div class="d-flex flex-wrap" id="units">
                        <!--<div class="p-2">
                            <div class="card" style="width: 16.34375rem;">
                                <img src="images/5.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">西京医院</h5>
                                    <p class="card-text">Some quick example text to build on the card title and make up
                                        the bulk of the card's content.</p>
                                    <a href="xiangqing.html" class="btn btn-primary">查 看 详 情</a>
                                </div>
                            </div>
                        </div>

                        <div class="p-2">
                            <div class="card" style="width: 16.34375rem;">
                                <img src="images/5.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">Some quick example text to build on the card title and make up
                                        the bulk of the card's content.</p>
                                    <a href="xiangqing.html" class="btn btn-primary">查 看 详 情</a>
                                </div>
                            </div>
                        </div>
                        <div class="p-2">
                            <div class="card" style="width: 16.34375rem;">
                                <img src="images/5.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">Some quick example text to build on the card title and make up
                                        the bulk of the card's content.</p>
                                    <a href="xiangqing.html" class="btn btn-primary">查 看 详 情</a>
                                </div>
                            </div>
                        </div>
                        <div class="p-2">
                            <div class="card" style="width: 16.34375rem;">
                                <img src="images/5.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">Some quick example text to build on the card title and make up
                                        the bulk of the card's content.</p>
                                    <a href="xiangqing.html" class="btn btn-primary">查 看 详 情</a>
                                </div>
                            </div>
                        </div>
                        <div class="p-2">
                            <div class="card" style="width: 16.34375rem;">
                                <img src="images/5.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">Some quick example text to build on the card title and make up
                                        the bulk of the card's content.</p>
                                    <a href="xiangqing.html" class="btn btn-primary">查 看 详 情</a>
                                </div>
                            </div>
                        </div>
                        <div class="p-2">
                            <div class="card" style="width: 16.34375rem;">
                                <img src="images/5.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">Some quick example text to build on the card title and make up
                                        the bulk of the card's content.</p>
                                    <a href="xiangqing.html" class="btn btn-primary">查 看 详 情</a>
                                </div>
                            </div>
                        </div>
                        <div class="p-2">
                            <div class="card" style="width: 16.34375rem;">
                                <img src="images/5.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">Some quick example text to build on the card title and make up
                                        the bulk of the card's content.</p>
                                    <a href="xiangqing.html" class="btn btn-primary">查 看 详 情</a>
                                </div>
                            </div>
                        </div>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="foot">
    <p>版权所有 腾飞健康</p>

</div>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script>
    //地址的省市县三级联动
    //step1:获取省级列表
    var getProvinceList = function () {
        $.ajax({
            url: "/getAllProvince",
            type: "get",
            dataType: "json",
            async: true,
            success: function (responseData) {
                console.log(responseData);
                //添加省级下拉项
                for (var i = 0; i < responseData.length; i++) {
                    $("#province").append("<option value=" + responseData[i].cityId + ">" + responseData[i].cityName + "</option>");
                }
            },
            error: function () {
                console.log("provinceList error");
            }
        });
    };
    //页面加载时生成‘省级列表’下拉项`
    $(document).ready(getProvinceList());
    //step2:生成市级下拉列表
    $("#province").change(function () {
        $("#area").html("").append("<option value=''>请选择 县/区级地址</option>");
        if ($("#province").val() != "") {
            let provinceId = $("#province").val();
            let units = getUnitsByProvince(provinceId);
            console.log(units);
            renderUnits(units);
            $.ajax({
                url: "/getAllCityByProvinceId?provinceId=" + provinceId,
                type: "get",
                dataType: "json",
                async: true,
                success: function (responseData) {
                    console.log(responseData);
                    //生成并渲染市级下拉项
                    $("#city").removeAttr("hidden").html("").append("<option value=''>请选择 市级地址</option>");
                    for (var i = 0; i < responseData.length; i++) {
                        $("#city").append("<option value=" + responseData[i].cityId + ">" + responseData[i].cityName + "</option>");
                    }
                    // if ($("select[name=city]").val() == "") {
                    //     $("select[name=county]").html("").append("<option value=''>请选择 县/区级地址</option>").attr("disabled", "disabled");
                    // }
                },
                error: function () {
                    console.log("cityList error");
                }
            });
        } else {
            $("#city").attr("hidden", "hidden");
        }
    });

    //step3:生成县区级下拉列表
    $("#city").change(function () {
        if ($("#city").val() != "") {
            let cityId = $("#city").val();
            let units = getUnitsByCityId(cityId);
            renderUnits(units);
            $.ajax({
                url: "/getAllCountyByCityId?cityId=" + cityId,
                dataType: "json",
                async: true,
                type: "get",
                success: function (responseData) {
                    //生成并渲染县/区级下拉项
                    $("#area").removeAttr("hidden").html("").append("<option value=''>请选择 县/区级地址</option>");
                    for (var i = 0; i < responseData.length; i++) {
                        $("#area").append("<option value=" + responseData[i].cityId + ">" + responseData[i].cityName + "</option>");
                    }
                },
                error: function () {
                    console.log("countyList error");
                }
            });
        } else {
            $("#area").attr("hidden");
        }
    });

    $("#area").change(function () {
        let areaId = $("#area").val();
        let units = getUnitsByAreaId(areaId);
        renderUnits(units);
    });

    function getUnitsByProvince(provinceId) {
        let units;
        $.ajax({
            url: "/getUnitsByProvinceId",
            dataType: "json",
            type: "post",
            data: "provinceId=" + provinceId,
            async: false,
            success: function (responseData) {
                console.log("一级province");
                console.log(responseData);
                units = responseData;
            },
            error: function () {
                console.log("根据省份获取体检单位失败");
            },
        });
        return units;
    };

    function getUnitsByCityId(cityId) {
        let units;
        $.ajax({
            url: "/getUnitsByCityId",
            dataType: "json",
            type: "post",
            data: "cityId=" + cityId,
            async: false,
            success: function (responseData) {
                console.log("二级city");
                console.log(responseData);
                units = responseData;
            },
            error: function () {
                console.log("根据市级地区获取体检单位失败");
            },
        });
        return units;
    };

    function getUnitsByAreaId(areaId) {
        let units;
        $.ajax({
            url: "/getUnitsByAreaId",
            dataType: "json",
            type: "post",
            data: "areaId=" + areaId,
            async: false,
            success: function (responseData) {
                console.log("三级area");
                console.log(responseData);
                units = responseData;
            },
            error: function () {
                console.log("根据县级地区获取体检单位失败");
            },
        });
        return units;
    }

    function renderUnits(units) {
        console.log(units);
        $("#unitNumber").html(units.length);
        $("#units").html("");
        for(let i=0; i<units.length; i++){
            $("#units").append("<div class='p-2'><div class='card' style='width: 16.34375rem;'>" +
                "<img src='images/5.jpg' class='card-img-top'>" +
                "<div class='card-body'><h5 class='card-title'>"+units[i].unitName+"</h5>" +
                "<p class='card-text'>"+units[i].description+"</p>" +
                "<a href='/xiangqing?unitId="+units[i].unitId+"' class='btn btn-primary'>查 看 详 情</a></div></div></div>");
        }
    }
</script>
</body>
</html>
